<template>
  <div class="publish-nav-container">
    <!-- 导航菜单 -->
    <div class="nav-menu">
      <el-menu 
        :default-active="activeIndex"
        mode="horizontal"
        class="publish-menu"
        @select="handleSelect">
        
        <el-menu-item 
          index="1" 
          @click="navigateTo('/home/addmessage/publishgoods')"
          :class="{ 'active-tab': isActive('publishgoods') }">
          <i class="el-icon-goods"></i>
          <span>发布商品</span>
        </el-menu-item>
        
        <el-menu-item 
          index="2" 
          @click="navigateTo('/home/addmessage/publishneeds')"
          :class="{ 'active-tab': isActive('publishneeds') }">
          <i class="el-icon-shopping-cart-2"></i>
          <span>发布需求</span>
        </el-menu-item>
        
        <el-menu-item 
          index="3" 
          @click="navigateTo('/home/addmessage/publishknowledges')"
          v-if="$store.getters.isExpert"
          :class="{ 'active-tab': isActive('publishknowledges') }">
          <i class="el-icon-notebook-2"></i>
          <span>发布知识</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  computed: {
    currentRoute() {
      return this.$route.path;
    }
  },
  methods: {
    isActive(pathSegment) {
      return this.currentRoute.includes(pathSegment);
    },
    handleSelect(key) {
      this.activeIndex = key;
    },
    navigateTo(path) {
      if (this.$route.path !== path) {
        this.$router.push(path).catch(err => err);
        this.$store.commit("updatePublishActiveIndex", path.includes('goods') ? '1' : 
                          path.includes('needs') ? '2' : '3');
      }
    }
  },
  created() {
    // 根据当前路由设置默认激活项
    if (this.currentRoute.includes('publishgoods')) {
      this.activeIndex = '1';
    } else if (this.currentRoute.includes('publishneeds')) {
      this.activeIndex = '2';
    } else if (this.currentRoute.includes('publishknowledges')) {
      this.activeIndex = '3';
    }
  }
};
</script>

<style lang="less" scoped>
.publish-nav-container {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  min-height: 100%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  
  .nav-menu {
    border-bottom: 1px solid #e6e6e6;
    
    .publish-menu {
      height: 60px;
      padding: 0 20px;
      
      .el-menu-item {
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        color: #606266;
        margin: 0 15px;
        border-bottom: 3px solid transparent;
        transition: all 0.3s;
        
        i {
          margin-right: 8px;
          font-size: 18px;
        }
        
        &:hover {
          background-color: transparent;
          color: #67C23A;
          border-bottom-color: #67C23A;
        }
        
        &.active-tab {
          color: #67C23A;
          border-bottom-color: #67C23A;
          font-weight: 500;
        }
      }
    }
  }
  
  .content-area {
    padding: 20px;
  }
}
</style>